<!DOCTYPE html>
<html>

<head>
    <title>西林食堂</title>
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="application/x-javascript">
        addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>

    <link href="./css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <link rel="shortcut icon" href="favicon.ico">
    <!-- js -->
    <script src="./js/jquery-1.11.1.min.js"></script>
    <script src="./js/vue.js"></script>
    <!-- //js -->
    <!-- start-smoth-scrolling -->
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event) {
                event.preventDefault();
                $('html,body').animate({
                    scrollTop: $(this.hash).offset().top
                }, 1000);
            });
        });
    </script>
    <!-- start-smoth-scrolling -->
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
    <style>
        /* 自定义样式 */
        body {
            font-family: 'Arial', sans-serif;
            color: #333;
            background-color: #f5f5f5;
        }
        
        .header {
            background-color: #fff;
            padding: 20px 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .header-nav .navbar-brand img {
            height: 50px; /* 自定义logo大小 */
        }
        
        .navbar-nav li a {
            color: #666;
            font-weight: bold;
            transition: color 0.3s ease;
        }
        
        .navbar-nav li a:hover {
            color: #333; /* 鼠标悬停时的颜色 */
        }
        
        /* ... 其他自定义样式 ... */
    </style>
</head>

<body>
   <div id="app">
         <!-- header -->
    <div class="header">
        <div class="container ">
            <div class="header-nav">
                <nav class="navbar navbar-default">
                    <div class="navbar-header" >
                        <a class="navbar-brand" href="index.html"><img src="images/logo.png"></a>
                    </div>
                    <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="hvr-bounce-to-bottom active"><a href="index.html">主页</a></li>
                            <li class="hvr-bounce-to-bottom"><a href="about.html">关于</a></li>
                            <li class="hvr-bounce-to-bottom"><a href="menu.html">菜谱</a></li>
                            <li class="hvr-bounce-to-bottom"><a href="blog.html">论坛交流</a></li>
                            <li class="hvr-bounce-to-bottom"><a href="contact.html">发布</a></li>
                            <li class="hvr-bounce-to-bottom "><a href="login.html" v-if="username==null">登录</a></li>
                            <li class="hvr-bounce-to-bottom"><a @click="logout"  >{{username}}</a></li>
                        </ul>
                    </div>

                </nav>
            </div>
        </div>
    </div>
    <!-- //header -->
    <!-- banner -->
    <div class="banner">
        <!-- Slider-starts-Here -->
        <script src="js/responsiveslides.min.js"></script>
        <script>
            $(function() {
                // Slideshow 4
                $("#slider3").responsiveSlides({
                    auto: true,
                    pager: false,
                    nav: false,
                    speed: 500,
                    namespace: "callbacks",
                    before: function() {
                        $('.events').append("<li>before event fired.</li>");
                    },
                    after: function() {
                        $('.events').append("<li>after event fired.</li>");
                    }
                });

            });
        </script>
        <!--//End-slider-script -->
        <div id="top" class="callbacks_container">
            <ul class="rslides" id="slider3">
                <li>
                    <div class="banner-info">
                        <div class="baner-inf">
                            <h1>同学！</h1>
                            <p>今天你吃什么呢？</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="banner-info1">
                        <div class="baner-inf">
                            <h1>西林食堂</h1>
                            <p>随你挑选</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="banner-info2">
                        <div class="baner-inf">
                            <h1>一个目标</h1>
                            <p>好好享受一个美妙的夜晚吧！</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="banner-bottom-grids">
            <div class="diningHoll">
                <div class="col-md-2 banner-bottom-grid " v-for="item in diningHodd" :key="item.id">
                    <div class="banner-bottom-grd back">
                        <h4>{{item.name}}</h4>
                        <p>{{item.sign}}</span></p>
                        <div class="clearfix"> </div>
                    </div>
                    <p class="debitis">  


                    </p>
                    <div class="more">
                        <a :href="'./menu.html?id='+item.id">了解更多</a>
                    </div>
                </div>
                
                <div class="clearfix"> </div>
            </div>
        </div>
    </div>
    <!-- //banner -->
    <!-- banner-bottom1 -->
    <div class="banner-bottom1">
        <div class="container">
            <h3>欢迎来到{{recommend.name}}</h3>
            <div class="banner-bottom1-grids">
                <div class="col-md-4 banner-bottom1-grid">
                    <img src="images/7.jpg" alt=" " class="img-responsive" />
                </div>
                <div class="col-md-8 banner-bottom1-grid">
                    <h4>{{recommend.sign}}</h4>
                    <p>{{recommend.desc}}</p>
                    <div class="more">
                        <a :href="'./menu.html?id='+recommend.id">了解详情</a>
                    </div>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
    </div>
    <!-- //banner-bottom1 -->
    <!-- newsletter -->
    <div class="newsletter">
        <div class="container">
            <div class="get-in-grids">
                <div class="get-in-grid-left">
                    <p>菜谱</p>
                </div>
                <div class="get-in-grid-right">
                    <input type="text" value="请输入..." class="search-input" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '请输入...';}" required="" v-model="search">
                    <input type="submit" value="搜索" class="search-btn" @click="toSearch">
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
    </div>
  
     
    </div>
    <div class="clear"> </div>
    <div class="copy-right">
        <p>小马 &copy; 希望你永远快乐</p>
    </div>
    <!--- //footer --->
    <!-- for bootstrap working -->
    <script src="js/bootstrap.js">
    </script>
    <!-- //for bootstrap working -->
    <script>
        $(function() {
            $('.search-btn').click(function() {
                var searchInput = $('.search-input').val();
                $.get("http://localhost:8080/menu?keyword="+searchInput,function (data){
                    localStorage.setItem("menuData", JSON.stringify(data))
                    location.href = "./pages/menus/menuContent.html";
                })
            })
        })
    </script>
   </div>
</body>
<script>
        new Vue({
        el:"#app",
        data:{
            hello:"helloWorld",
            diningHodd:[],
            recommend:{},
            comments:[],
            search:"",
            username:""
           
        },
        // 创建就运行
        async created() {
            this.isLogin()
            await this.getAllDiningHoll()
            this.myDo()
            setInterval(() => {this.myDo() }, 4000)
           

        },
        // 方法
        methods: {
            // 退出登录
            logout(){
                sessionStorage.clear()
                window.location.reload()
            },
            //判断是否登录
            isLogin(){
                this.username = sessionStorage.getItem("username")
            },
             // get请求
             async getAllDiningHoll(){
                const response =  await fetch('http://127.0.0.1:5001/hall/list')
                const data = await response.json();
                // 给数据赋值
                this.diningHodd =  data.data

            },
            async myDo(){
                const response =  await fetch('http://127.0.0.1:5001/hall/rand')
                const data = await response.json();
                // 给数据赋值
                this.recommend =  data.data[0]
            },
            toSearch(){
                if(this.search){
                    window.location.href="./menu.html?query="+this.search
                }else{
                    alert("请输入搜索内容")
                }
            }
            // async getComments(){
            //     const response =  await fetch('http://127.0.0.1:5001/blog/comments')
            //     const data = await response.json();
            //     // 给数据赋值
            //     this.comments =  data.data
            // },
        }
    })
</script>
</html>